<template>
  <div class="page-common-layout completed-accept-container">
    <div class="completed-accept-header">
      {{ menuName }}
      <div class="button-groups">
        <!--  -->
        <a-button
          v-if="form.edit && !isEditor"
          icon="edit"
          @click="handleEditor()"
        >
          编辑
        </a-button>
        <template v-if="isEditor">
          <a-button @click="handleCancel()">取消</a-button>
          <a-button
            @click="handleSave()"
            type="primary"
            :loading="submitLoading"
          >
            确定
          </a-button>
        </template>
        <!--  -->
        <a-button
          v-if="form.submit && !isEditor"
          icon="diff"
          @click="handleSubmit()"
          type="primary"
          :loading="submitLoading"
        >
          提交
        </a-button>
        <!--  -->
        <a-dropdown v-if="historys.length > 0">
          <a-menu slot="overlay" @click="handleMenuClick($event)">
            <a-menu-item v-for="item in historys" :key="item.uuid">
              {{ item.versionNumber }}
            </a-menu-item>
            <a-menu-item key="version">
              当前版本
            </a-menu-item>
          </a-menu>
          <a-button> 历史记录 <a-icon type="down" /> </a-button>
        </a-dropdown>
        <a-button v-if="form.approveRecord" @click="gotoApprovalRecord()">
          审批记录
        </a-button>
        <!--  -->
        <a-button
          @click="handleApprove()"
          type="primary"
          v-if="form.approve && !isEditor && !isApprove"
        >
          <icon-fonts icon="icon-shenpi1" type="small"></icon-fonts>
          审批
        </a-button>
        <template v-if="isApprove">
          <a-button @click="approveCancel()">取消</a-button>
          <a-button
            @click="approveSave()"
            type="primary"
            :loading="submitLoading"
          >
            确定
          </a-button>
        </template>
      </div>
    </div>
    <div class="completed-accept-main" id="preview-container">
      <div class="tabs-container">
        <a-tabs type="card" @change="changeTabs($event)" v-model="activeTabKey">
          <a-tab-pane
            :key="item.fileType"
            :tab="item.fileTypeName"
            v-for="item in tabSource"
          >
          </a-tab-pane>
        </a-tabs>
        <div class="download">
          <template v-if="isEditor">
            <input
              @change="importExcel($event)"
              type="file"
              ref="upload"
              id="upload"
              style="display: none"
            />
            <a-button
              type="primary"
              icon="cloud-upload"
              @click="handleUpload()"
              v-if="activeTabKey != 'KGZBWJLX.01' || !currentTreeNode.checkable"
            >
              上传
            </a-button>
            <a-button
              type="primary"
              icon="delete"
              @click="handleBatchDeleteFile()"
              v-if="activeTabKey == 'KGZBWJLX.01'"
            >
              批量删除
            </a-button>
          </template>
          <!--  -->
          <a-button
            v-if="activeTabKey == 'KGZBWJLX.01'"
            v-action:kgzb_download
            type="primary"
            icon="download"
            @click="handleBatchDownload()"
            :loading="downloadLoading"
            :disabled="downloadLoading"
          >
            {{ downloadLoading ? "下载中" : "批量下载" }}
          </a-button>
        </div>
      </div>
      <div class="file-container">
        <div class="file-list-container" v-if="activeTabKey == 'KGZBWJLX.01'">
          <div class="sub-header">
            文件列表
          </div>
          <div class="list-warp">
            <a-tree
              v-model="checkedKeys"
              checkable
              show-icon
              show-line
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              :replaceFields="{
                children: 'children',
                title: 'ml',
                key: 'uuid',
              }"
              @expand="onExpand"
              @select="onSelect"
              @check="onCheck"
            >
              <!-- 自定义图标 -->
              <template slot="custom" slot-scope="{ expanded, checkable, ml }">
                <a-icon
                  :type="expanded ? 'folder-open' : 'folder'"
                  theme="filled"
                  v-if="!checkable"
                />
                <div
                  v-else
                  class="file-icon"
                  :class="[getFileIconName(ml)]"
                ></div>
              </template>
              <template slot="title" slot-scope="{ ml }">
                <div class="custom-tree-title-warp">
                  <div class="title" :title="ml">
                    {{ ml }}
                  </div>
                </div>
              </template>
            </a-tree>
          </div>
        </div>
        <div class="file-view-container">
          <div class="tip-name">
            <!-- 文件信息 -->
            <div class="file-info">
              <div class="block">
                <div
                  class="file-icon"
                  :class="[getFileIconName(currentFile.ml)]"
                ></div>
              </div>
              <div class="info-content">
                <div class="info-name">{{ currentFile.ml || "-" }}</div>
                <div class="user">
                  {{ currentFile.creator || "-" }}
                  <div class="drop"></div>
                  {{ currentFile.time || "-" }}
                </div>
              </div>
            </div>
            <div class="operate">
              <!-- 删除 -->
              <div
                v-if="isEditor"
                class="block"
                @click="handleDelClick()"
                title="删除"
              >
                <a-icon type="delete" />
              </div>
              <!-- 下载 -->
              <div
                class="block"
                @click="downloadFile()"
                title="下载"
                v-action:kgzb_download
              >
                <a-icon type="download" />
              </div>
              <!-- 全屏 -->
              <div
                class="block"
                :title="isFull ? '退出全屏' : '全屏'"
                @click="!isFull ? handleFullScreen() : exitFullscreen()"
              >
                <a-icon :type="isFull ? 'fullscreen-exit' : 'fullscreen'" />
              </div>
            </div>
          </div>
          <div class="preview-file-warp">
            <iframe
              v-if="fileUrl"
              :src="fileUrl"
              frameborder="0"
              width="100%"
              height="100%"
            ></iframe>
          </div>
        </div>
      </div>
    </div>
    <!-- 审批信息 -->
    <div class="approval-container" v-if="form.approve && isApprove">
      <a-divider />
      <a-form-model
        ref="ruleForm"
        :model="approveForm"
        :rules="approveRules"
        :hideRequiredMark="false"
      >
        <a-form-model-item
          label="审批结果"
          prop="operate"
          :rules="{
            required: true,
            message: '请选择审批结果',
          }"
        >
          <a-radio-group v-model="approveForm.operate">
            <a-radio :value="2">
              通过
            </a-radio>
            <a-radio :value="3">
              驳回
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="审批意见" prop="reason">
          <a-textarea
            placeholder="请输入"
            :rows="4"
            v-model="approveForm.reason"
          />
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 审批记录 -->
    <comment-modal ref="commentModal"></comment-modal>
  </div>
</template>

<script>
//竣工规划资源验收
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import {
  getToken,
  downloadDfs,
  downLoadBatchFileByArraybuffer,
} from "@/utils/TopVUI";
//审批记录
import commentModal from "@/pages/workflow/oaLeave/comment.vue";
import { addAttributeByKey, getFileIconName, _getUUID } from "@/utils/util.js";
export default {
  components: {
    commentModal,
  },
  data() {
    return {
      form: {},
      tabSource: [],
      //目录
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      currentTreeNode: {},
      //
      downloadLoading: false,
      //
      submitLoading: false,
      currentFile: {},
      //全屏状态
      isFull: false,
      //是否编辑
      isEditor: false,
      //文件地址
      fileUrl: "",
      activeTabKey: "",
      //是否批量删除
      isBatchDelete: false,
      //
      historys: [],
      //
      approveForm: {
        //审批结果
        operate: "",
        //审批意见
        reason: "",
      },
      approveRules: {},
      //
      isApprove: false,
    };
  },

  computed: {
    ...mapGetters(["configData", "nickname"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
    menuName() {
      let { title } = this.$route.meta;
      return title;
    },
  },
  mounted() {
    this.getData();
    window.addEventListener("resize", () => {
      this.isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      );
    });
  },
  methods: {
    getFileIconName,

    //审批记录
    gotoApprovalRecord() {
      let { uuid } = this.form;
      this.$refs.commentModal.getCommentList(uuid);
    },

    //历史记录
    handleMenuClick(ev) {
      let { key } = ev;
      if (key == "version") {
        this.getData();
      } else {
        this.getHistoryData(key);
      }
    },

    getHistoryData(uuid) {
      axios
        .post(
          `/probusiness/technologyOperatingReserves/getDetailByUuid?uuid=${uuid}`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          //////////////
          this.form = data ?? {};
          //tab标签
          this.tabSource = data?.technologyFilesList ?? [];
          //////////////
          if (!this.activeTabKey) {
            this.activeTabKey = this.tabSource?.[0]?.fileType;
            let source = this.tabSource?.[0]?.children ?? [];
            this.expandedKeys = source.map((v) => v.uuid).filter((v) => v);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "children"
            );
            this.treeData = filterData ?? [];
            this.currentTreeNode = filterData[0].children?.[0] ?? {};
            this.selectedKeys = [this.currentTreeNode.uuid];
            this.currentFile = this.currentTreeNode;
            this.getFileUrl();
          } else if (this.activeTabKey != "KGZBWJLX.01") {
            let index = this.tabSource.findIndex(
              (v) => v.fileType == this.activeTabKey
            );
            if (index == -1) {
              return;
            }
            let currentSource = this.tabSource[index];
            this.currentFile = currentSource.children?.[0] ?? {};
            this.getFileUrl();
          } else {
            let index = this.tabSource.findIndex(
              (v) => v.fileType == this.activeTabKey
            );
            if (index == -1) {
              return;
            }
            let source = this.tabSource?.[index]?.children ?? [];
            this.expandedKeys = source.map((v) => v.uuid).filter((v) => v);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "children"
            );
            this.treeData = filterData ?? [];
            this.currentTreeNode = this.treeData?.[0]?.children?.[0] ?? {};
            this.currentFile = this.currentTreeNode;
            this.selectedKeys = [this.currentTreeNode.uuid];
            // console.log(this.isBatchDelete, "this.isBatchDelete");
            // //是否批量删除
            // if (this.isBatchDelete) {
            //   this.currentTreeNode = this.treeData?.[0]?.children?.[0] ?? {};
            //   this.currentFile = this.currentTreeNode;
            //   this.selectedKeys = [this.currentTreeNode.uuid];
            // } else {
            //   console.log(this.currentTreeNode.url);
            //   if (this.currentTreeNode.url) {
            //     this.currentFile = this.currentTreeNode;
            //   } else {
            //     let array = this.currentTreeNode.children;
            //     this.currentTreeNode = array?.[array.length - 1] ?? {};
            //     this.currentFile = this.currentTreeNode;
            //     this.selectedKeys = [this.currentFile.uuid];
            //   }
            // }
            this.getFileUrl();
          }
        })
        .catch((_) => {
          this.form = {};
          this.tabSource = [];
          this.activeTabKey = "";
          this.fileList = [];
          this.currentFile = {};
        });
    },

    //审批
    handleApprove() {
      this.isApprove = true;
    },
    approveCancel() {
      this.isApprove = false;
    },
    approveSave() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { form, approveForm } = this;
          let formJson = {
            //ID
            uuid: form.uuid,
            //审批结果
            operate: approveForm.operate,
            //审批意见
            reason: approveForm.reason,
          };
          this.submitLoading = true;
          axios
            .post(
              `/probusiness/technologyOperatingReserves/approveData`,
              formJson,
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success(res.message ?? "审批成功", 1.5);
                this.isApprove = false;
                this.getData();
              } else {
                this.$message.error(res?.message ?? "审批失败");
              }
            })
            .catch((_) => {
              this.$message.error(_?.message ?? "审批失败");
            })
            .finally((_) => {
              this.submitLoading = false;
            });
        }
      });
    },

    //提交
    handleSubmit() {
      let that = this;
      let { uuid } = that.form;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定提交所选内容?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FAAD14",
          }),
        onOk() {
          that.submitLoading = true;
          axios
            .post(
              `/probusiness/technologyOperatingReserves/submitData?uuid=${uuid}`,
              {},
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("提交成功", 1.5);
                that.getData();
              } else {
                that.$message.error(res?.message ?? "提交失败");
              }
            })
            .catch((_) => {
              that.$message.error(res?.message ?? "提交失败");
            })
            .finally(() => {
              that.submitLoading = false;
            });
        },
        onCancel() {},
      });
    },

    //编辑
    handleEditor() {
      this.isEditor = true;
    },
    //取消
    handleCancel() {
      this.isEditor = false;
      this.getData();
    },
    //确定
    handleSave() {
      let { form, tabSource } = this;
      let formJson = {
        //主键id
        uuid: form.uuid,
        //文件集合
        technologyFilesList: [],
      };
      //处理提交数据
      tabSource.forEach((item) => {
        if (item.fileType == "KGZBWJLX.01") {
          item.children.forEach((v) => {
            formJson.technologyFilesList.push({
              fileType: v.fileType,
              ml: v.ml,
              files: JSON.stringify(v.children ?? []),
            });
          });
        } else {
          formJson.technologyFilesList.push({
            fileType: item.fileType,
            files: JSON.stringify(item.children ?? []),
          });
        }
      });
      axios
        .post(
          `/probusiness/technologyOperatingReserves/saveOrUpdateData`,
          formJson,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("操作成功", 1.5);
            this.isEditor = false;
            this.getData();
          } else {
            this.$message.error(res?.message ?? "操作失败");
          }
        })
        .catch((_) => {});
    },
    //上传
    handleUpload() {
      this.$refs.upload.click();
    },
    importExcel(event) {
      let file = event.target.files[0];
      let formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.isBatchDelete = false;
          let lastIdx = file.name.lastIndexOf(".");
          let fileType = "." + file.name.substring(lastIdx + 1);
          let uploadFile = {
            //文件大小
            size: res.docSize,
            //文件类型
            type: fileType,
            //文件名称
            ml: res.object,
            //文件ID
            uuid: res.dfsFileUuid,
            //文件地址
            url: res.url,
            //上传人
            creator: res.creator,
            //上传时间
            time: res.createTime,
            //复选框
            checkable: true,
          };
          let index = this.tabSource.findIndex(
            (v) => v.fileType == this.activeTabKey
          );
          if (index == -1) {
            return;
          }
          let { uuid } = this.currentTreeNode;
          //有目录上传
          if (this.activeTabKey == "KGZBWJLX.01") {
            this.tabSource[index].children.forEach((v) => {
              if (v.uuid == uuid) {
                v.children.push(uploadFile);
              }
            });
            // 手动改变树节点下文件;
            let source = this.tabSource[index]?.children ?? [];
            this.expandedKeys = source.map((v) => v.uuid).filter((v) => v);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "children"
            );
            this.treeData = filterData ?? [];
          }
          //无目录上传
          else {
            this.tabSource[index].children[0] = uploadFile;
            this.currentFile = uploadFile;
            this.getFileUrl();
          }
        })
        .catch((_) => {})
        .finally((_) => {
          event.target.value = "";
        });
    },

    //文件预览
    getFileUrl() {
      let { url } = this.currentFile;
      if (!url) {
        this.fileUrl = "";
        return;
      }

      this.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
    },

    //tab切换
    changeTabs() {
      let index = this.tabSource.findIndex(
        (v) => v.fileType == this.activeTabKey
      );
      if (index == -1) {
        this.fileUrl = "";
        return;
      }
      let currentSource = this.tabSource[index];
      if (this.activeTabKey == "KGZBWJLX.01") {
        if (this.currentTreeNode.url) {
          this.currentFile = this.currentTreeNode;
        } else {
          let array = this.currentTreeNode.children;
          this.currentTreeNode = array?.[0] ?? {};
          this.currentFile = this.currentTreeNode;
          this.selectedKeys = [this.currentFile.uuid];
        }
      } else {
        this.currentFile = currentSource?.children?.[0] ?? {};
      }
      this.getFileUrl();
    },

    getData() {
      axios
        .post(
          `/probusiness/technologyOperatingReserves/getDetailData`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          //////////////
          this.form = data ?? {};
          //历史记录
          this.historys = data?.historys ?? [];
          //tab标签
          this.tabSource = data?.technologyFilesList ?? [];
          //////////////
          if (!this.activeTabKey) {
            this.activeTabKey = this.tabSource?.[0]?.fileType;
            let source = this.tabSource?.[0]?.children ?? [];
            this.expandedKeys = source.map((v) => v.uuid).filter((v) => v);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "children"
            );
            this.treeData = filterData ?? [];
            this.currentTreeNode = filterData[0].children?.[0] ?? {};
            this.selectedKeys = [this.currentTreeNode.uuid];
            this.currentFile = this.currentTreeNode;
            this.getFileUrl();
          } else if (this.activeTabKey != "KGZBWJLX.01") {
            let index = this.tabSource.findIndex(
              (v) => v.fileType == this.activeTabKey
            );
            if (index == -1) {
              return;
            }
            let currentSource = this.tabSource[index];
            this.currentFile = currentSource.children?.[0] ?? {};
            this.getFileUrl();
          } else {
            let index = this.tabSource.findIndex(
              (v) => v.fileType == this.activeTabKey
            );
            if (index == -1) {
              return;
            }
            let source = this.tabSource?.[index]?.children ?? [];
            this.expandedKeys = source.map((v) => v.uuid).filter((v) => v);
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "children"
            );
            this.treeData = filterData ?? [];
            //是否批量删除
            if (this.isBatchDelete) {
              this.currentTreeNode = this.treeData?.[0]?.children?.[0] ?? {};
              this.currentFile = this.currentTreeNode;
              this.selectedKeys = [this.currentTreeNode.uuid];
            } else {
              if (this.currentTreeNode.url) {
                this.currentFile = this.currentTreeNode;
              } else {
                if (this.currentTreeNode?.children) {
                  let array = this.currentTreeNode.children;
                  this.currentTreeNode = array?.[array.length - 1] ?? {};
                } else {
                  this.currentTreeNode =
                    this.treeData?.[0]?.children?.[0] ?? {};
                }
                this.currentFile = this.currentTreeNode;
                this.selectedKeys = [this.currentFile.uuid];
              }
            }
            this.getFileUrl();
          }
        })
        .catch((_) => {
          this.tabSource = [];
          this.treeData = [];
          this.selectedKeys = [];
          this.expandedKeys = [];
        });
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //监听树形选择
    onSelect(selectedKeys, info) {
      let { uuid, url } = info.node.dataRef;
      this.selectedKeys = [uuid];
      this.currentTreeNode = info.node.dataRef;
      if (url) {
        this.currentFile = info.node.dataRef;
        this.getFileUrl();
      }
    },

    onCheck(checkedKeys, e) {},

    //批量下载
    handleBatchDownload() {
      if (this.checkedKeys.length == 0) {
        this.$message.warning("请选择文件！");
        return;
      }
      let uuids = this.checkedKeys;
      this.downloadLoading = true;
      axios
        .post(
          `/probusiness/technologySite/exportZip`,
          {
            fileUuids: uuids,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
            apiType: "file",
            responseType: "arraybuffer",
          }
        )
        .then((data) => {
          let name = this.tabSource.find((v) => v.fileType == this.activeTabKey)
            .fileTypeName;
          downLoadBatchFileByArraybuffer(data, name);
        })
        .catch()
        .finally((_) => {
          this.downloadLoading = false;
        });
    },

    //下载
    downloadFile() {
      let { url } = this.currentFile;
      if (!url) {
        return this.$message.error("文件地址错误，请稍后重试！");
      }
      downloadDfs(url);
    },

    //批量删除
    handleBatchDeleteFile() {
      if (this.checkedKeys.length == 0) {
        this.$message.warning("请选择文件！");
        return;
      }
      this.isBatchDelete = true;
      this.tabSource.forEach((item) => {
        if (item.fileType == "KGZBWJLX.01") {
          item.children.forEach((v) => {
            v.children = v.children.filter(
              (el) => !this.checkedKeys.includes(el.uuid)
            );
          });
        }
      });
      this.checkedKeys = [];
      this.currentTreeNode = this.treeData?.[0]?.children?.[0] ?? {};
      this.currentFile = this.currentTreeNode;
      this.selectedKeys = [this.currentTreeNode.uuid];
      this.getFileUrl();
    },

    //删除
    handleDelClick() {
      let { uuid } = this.currentFile;
      if (this.activeTabKey == "KGZBWJLX.01") {
        this.tabSource.forEach((item) => {
          if (item.fileType == "KGZBWJLX.01") {
            item.children.forEach((v) => {
              v.children = v.children.filter((el) => el.uuid != uuid);
            });
          }
        });
        this.currentTreeNode = this.treeData?.[0]?.children?.[0] ?? {};
        this.currentFile = this.currentTreeNode;
        this.selectedKeys = [this.currentTreeNode.uuid];
        this.getFileUrl();
      } else {
        this.currentFile = {};
        this.getFileUrl();
      }
    },

    //全屏
    handleFullScreen() {
      const element = document.getElementById("preview-container");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },

    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },

    //文件大小转换
    sizeTostr(size = 0) {
      size = Number(size);
      var data = "";
      if (size < 0.1 * 1024) {
        //如果小于0.1KB转化成B
        data = size.toFixed(2) + "B";
      } else if (size < 0.1 * 1024 * 1024) {
        //如果小于0.1MB转化成KB
        data = (size / 1024).toFixed(2) + "KB";
      } else if (size < 0.1 * 1024 * 1024 * 1024) {
        //如果小于0.1GB转化成MB
        data = (size / (1024 * 1024)).toFixed(2) + "MB";
      } else {
        //其他转化成GB
        data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }
      var sizestr = data + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
  },
};
</script>

<style lang="less" scoped>
.completed-accept-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  .completed-accept-header {
    height: 64px;
    border-bottom: 1px solid #d9d9d9;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #333333;
    flex-shrink: 0;
    .button-groups {
      /deep/.ant-btn {
        margin-left: 16px;
      }
    }
  }
  .completed-accept-main {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    .tabs-container {
      display: flex;
      /deep/.ant-tabs {
        flex: 1;
        .ant-tabs-nav .ant-tabs-tab {
          margin-right: 8px !important;
          height: 100% !important;
        }
        .ant-tabs-nav-container {
          height: 40px !important;
        }
        .ant-tabs-content {
          display: none;
        }
      }
      .download {
        margin-right: 8px;
        height: 40px;
        border-bottom: 1px solid #e8e8e8;
        /deep/.ant-btn {
          margin-left: 16px;
        }
      }
    }
    .file-container {
      flex: 1;
      border-radius: 4px;
      display: flex;
      overflow: hidden;
      border: 1px solid #d4d7d8;
      .file-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        &.pdf {
          background: url("~@/assets/img/fileIcon/pdf.png");
          background-size: 100% 100%;
        }
        &.doc {
          background: url("~@/assets/img/fileIcon/doc.png");
          background-size: 100% 100%;
        }
        &.xls {
          background: url("~@/assets/img/fileIcon/xls.png");
          background-size: 100% 100%;
        }
        &.ppt {
          background: url("~@/assets/img/fileIcon/ppt.png");
          background-size: 100% 100%;
        }
        &.image {
          background: url("~@/assets/img/fileIcon/image.png");
          background-size: 100% 100%;
        }
        &.txt {
          background: url("~@/assets/img/fileIcon/txt.png");
          background-size: 100% 100%;
        }
        &.zip {
          background: url("~@/assets/img/fileIcon/zip.png");
          background-size: 100% 100%;
        }
        &.music {
          background: url("~@/assets/img/fileIcon/music.png");
          background-size: 100% 100%;
        }
        &.video {
          background: url("~@/assets/img/fileIcon/video.png");
          background-size: 100% 100%;
        }
        &.annex {
          background: url("~@/assets/img/fileIcon/annex.png");
          background-size: 100% 100%;
        }
        &.cad {
          background: url("~@/assets/img/fileIcon/cad.png");
          background-size: 100% 100%;
        }
      }
      .file-list-container {
        width: 300px;
        border-radius: 4px 0px 0px 4px;
        border-right: 1px solid #d4d7d8;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .sub-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 16px;
          box-sizing: border-box;
          font-size: 16px;
          color: #333333;
          .all-select {
            font-size: 14px;
            color: #1890ff;
            cursor: pointer;
          }
        }
        .list-warp {
          flex: 1;
          overflow: auto;
          position: relative;
          padding: 0 16px;
          /deep/.ant-empty {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }

          /deep/.ant-tree {
            .ant-tree-node-content-wrapper {
              &:hover {
                .operate {
                  .anticon {
                    display: inline-block !important;
                  }
                }
              }
            }
            li {
              width: 100%;
              .ant-tree-node-content-wrapper {
                position: relative;
                width: calc(100% - 40px);
                padding: 0;
                .ant-tree-iconEle {
                  color: #ffca28;
                  font-size: 16px;
                }
                .file-icon {
                  position: relative;
                  top: 50%;
                  transform: translateY(-50%);
                }
                .ant-tree-title {
                  overflow: hidden;
                  display: inline-block;
                  width: calc(100% - 26px);
                  .custom-tree-title-warp {
                    display: flex;
                    width: 100%;
                    .title {
                      flex: 1;
                      overflow: hidden;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                    .operate {
                      flex-shrink: 0;
                      color: #8c8c8c;
                      .anticon {
                        display: none;
                        margin-right: 8px;
                        &:last-of-type {
                          margin-right: 0;
                        }
                      }
                      .add-file-button {
                        font-size: 15px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .file-view-container {
        background: #f7f7f7;
        flex: 1;
        border-radius: 0 4px 4px 0px;
        position: relative;
        display: flex;
        flex-direction: column;
        .tip-name {
          height: 64px;
          width: 100%;
          background: #ffffff;
          border-radius: 0px 4px 0px 0px;
          border-bottom: 1px solid #d4d7d8;
          padding: 0 16px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .block {
            width: 32px;
            height: 32px;
            background: #ffffff;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
            border-radius: 4px 4px 4px 4px;
            margin-right: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .file-info {
            display: flex;
            align-items: center;
            .info-content {
              .info-name {
                font-size: 14px;
                color: #333333;
              }
              .user {
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #8a9295;
                .drop {
                  margin: 0 8px;
                  width: 4px;
                  height: 4px;
                  background: #8a9295;
                  border-radius: 10px 10px 10px 10px;
                }
              }
            }
          }
          .operate {
            display: flex;
            align-items: center;
            .block {
              cursor: pointer;
              &:last-of-type {
                margin-right: 0;
              }
            }
          }
        }
        .preview-file-warp {
          flex: 1;
        }
      }
    }
  }
  .approval-container {
    padding: 0 16px 0 16px;
    box-sizing: border-box;
    /deep/.ant-form-item {
      display: flex;
      .ant-form-item-label {
        flex-shrink: 0;
        width: 100px;
        label {
          color: #333333;
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        overflow: hidden;
      }
    }
    /deep/.ant-divider {
      margin: 10px 0;
    }
  }
}
</style>
